/**
 * Created by wuyunan on 2017/5/19.
 */
import React from "react";

import {
  ActivityIndicator, StyleSheet, Text, TouchableOpacity, View,
} from "react-native";
import PropTypes from "prop-types";
import { FontSize, RefreshState, scale } from "../../common/index";
import { isEmpty } from "../../utils/utils";

export const FooterText = {
  footerRefreshingText: "数据加载中……",
  footerFailureText: "点击重新加载",
  footerNoMoreDataText: "我是有底线的",
};

const FooterComponent = props => {
  const {
    footerState, refreshingText, noMoreText, onPress,
  } = props;

  if (footerState === RefreshState.Idle) {
    return null;
  }
  if (footerState === RefreshState.Failure) {
    return (
      <TouchableOpacity style={styles.footerContainer} onPress={onPress}>
        <Text style={styles.footerText}>{FooterText.footerFailureText}</Text>
      </TouchableOpacity>
    );
  }
  if (footerState === RefreshState.Refreshing) {
    return (
      <View style={styles.footerContainer}>
        <ActivityIndicator size="small" color="#cccccc" />
        {!isEmpty(refreshingText) ? <Text style={styles.footerText}>{refreshingText}</Text> : null}
      </View>
    );
  }
  if (footerState === RefreshState.NoMoreData) {
    return (
      <View style={[styles.footerContainer, styles.noMoreData]}>
        <View style={styles.line} />
        <Text style={styles.footerText}>{noMoreText}</Text>
        <View style={styles.line} />
      </View>
    );
  }
  return null;
};

FooterComponent.propTypes = {
  noMoreText: PropTypes.string,
  refreshingText: PropTypes.string,
  onPress: PropTypes.func,
  footerState: PropTypes.string,
};
FooterComponent.defaultProps = {
  noMoreText: FooterText.footerNoMoreDataText,
  refreshingText: FooterText.footerRefreshingText,
  onPress: () => {},
  footerState: RefreshState.Refreshing,
};
const styles = StyleSheet.create({
  footerContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    padding: 10 * scale,
  },
  footerText: {
    fontSize: FontSize.SIZE_14,
    color: "#cccccc",
  },
  line: {
    width: 40 * scale,
    marginHorizontal: 13 * scale,
    height: StyleSheet.hairlineWidth,
    backgroundColor: "#cccccc",
  },
  noMoreData: {
    marginTop: 26 * scale,
  },
});

export default FooterComponent;
